<template>
    <div class="info">
        <scroll ref="scroll" class="scroll-content">
            <div class="scroll-warpper">
                <!-- 顶部价格 -->
                <div class="info-top">
                    <div class="price-left">
                        <div class="price">
                            <div class="num">{{userChoice.price}}</div>
                            <div class="text">元</div>
                        </div>
                        <div class="note">
                            <i class="icon iconfont icon-remind"></i>
                            <div class="note-text">下周预计下跌￥{{parseInt(userChoice.price*0.08)}}</div>
                        </div>
                    </div>
                    <div class="price-right">
                        <div class="btn" @click.prevent.stop="goFront">重新估价</div>
                        <div class="btn btn-desc" @click.prevent.stop="showProDesc">{{proDescTitle}}</div>
                    </div>
                </div>
                <!-- 价格对比,本机状况 -->
                <div class="info-center">
                    <div class="center-box">
                        <div class="title">{{proDescTitle}}</div>
                        <transition name="fade" mode="out-in">
                            <!-- 价格对比 -->
                            <chart :price="userChoice.price" v-if="!chartOrFault"></chart>
                            <!-- 本机状况 -->
                            <ul class="item-box" v-else>
                                <li class="fault-item" v-for="item in userChoice.single">
                                    <div class="text">{{item.title}}</div>
                                </li>
                                <li class="fault-item" v-for="item in userChoice.double">
                                    <div class="text">{{item.title}}</div>
                                </li>
                            </ul>
                        </transition>
                    </div>
                </div>
                <!-- 填写用户信息 -->
                <div class="info-user">
                    <div class="user-box">
                        <div class="title">用户信息</div>
                        <div class="user-wrapper">
                            <div class="item">
                                <div class="text"><i class="icon iconfont icon-mine"></i>姓名</div>
                                <div class="form">
                                    <input type="text" placeholder="请填写您的姓名" v-model="user.name"/>
                                </div>
                            </div>
                            <div class="item">
                                <div class="text"><i class="icon iconfont icon-mobilephone"></i>电话</div>
                                <div class="form">
                                    <input type="text" placeholder="用于查询订单和客服联系" v-model="user.tel"/>
                                </div>
                            </div>
                            <div class="item">
                                <div class="text"><i class="icon iconfont icon-transaction_fill"></i>支付宝</div>
                                <div class="form">
                                    <input type="text" placeholder="用于手服网给您打款" v-model="user.alipay"/>
                                </div>
                            </div>
                            <div class="item" @click.prevent.stop="showSiteFun">
                                <div class="text"><i class="icon iconfont icon-flag"></i>省市区</div>
                                <div class="form" v-if="!user.shengCityArea">请选择所在的省市区(县)！</div>
                                <div class="form" v-if="user.shengCityArea">{{provice}} {{city}} {{area}}</div>
                            </div>
                            <transition name="fade">
                                <div class="item location" v-show="showSite">
                                    <div class="form">
                                        <select class="provice" v-model="provice" @change.stop.prevent="getCity(provice)">
                                            <option value="">选择省</option>
                                            <option :value="item.name" v-for="item in site" v-if="site">{{item.name}}</option>
                                        </select>
                                        <select class="city" v-model="city" @change.stop.prevent="getArea(city)">
                                            <option value="">选择市</option>
                                            <option :value="item.name" v-for="item in site_city" v-if="site_city">{{item.name}}</option>
                                        </select>
                                        <select class="area" v-model="area" @change.stop.prevent="getAdderss(area)">
                                            <option value="">选择区</option>
                                            <option :value="item" v-for="item in site_area" v-if="site_area">{{item}}</option>
                                        </select>
                                    </div>
                                </div>
                            </transition>
                            <div class="item">
                                <div class="text"><i class="icon iconfont icon-iconzhuyenor"></i>地址</div>
                                <div class="form">
                                    <input type="text" placeholder="请填写详细地址" v-model="user.address"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 阅读服务协议 -->
                <div class="agree">
                    <div class="agree-wrapper">
                        <label for="agree" class="text">
                            <input id="agree" type="checkbox" v-model="user.agree"/>我已经阅读并同意
                        </label>
                        <router-link class="book" tag="div" :to="'/hsfault/hsinfo/hsagree'">服务协议</router-link>
                    </div>
                </div>
                <!-- 按钮 -->
                <div class="btn-wrapper" @click="submitOrder">
                    <button-medium text="确认下单" :bg="bg" ref="btn"></button-medium>
                </div>
            </div>
        </scroll>
        <!--下一页视图-->
        <transition name="fade">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import Scroll from '../../base/scroll/scroll.vue'           //缓动框架
import chart from '../parts/chart.vue'                      //图表
import ButtonMedium from '../parts/buttonMedium.vue'        //按钮
import {toast, indicator} from '../../base/js/toast.js'     //提示信息
import {Trim} from '../../common/js/dom.js'                 //去除空格
import {mapMutations, mapGetters} from 'vuex'

export default {
    data() {
        return {
            chartOrFault: false,                 //显示价格对比还是产品描述
            proDescTitle: '价格对比',             //按钮的title
            bg: '#fff',                          //提交按钮背景色
            userChoice: this.$route.query,       //用户选择的信息
            site: [],                            //省市区信息
            site_city: [],                       //市信息
            site_area: [],                       //区信息
            provice: '',                    //省
            city: '',                       //市
            area: '',                       //区
            showSite: false,                     //是否显示选择省市区的select
            order_way: 1,                        //回收方式：1 邮寄回收  ，   
            user: {                              //用户信息
                name: '',                        //姓名
                tel: '',                         //电话
                alipay: '',                      //支付宝
                shengCityArea: '',               //省市区
                address: '',                     //详细地址
                agree: false,                    //用户是否同意回收协议
            },
        }
    },
    components: {Scroll, chart, ButtonMedium},
    computed: {
        // 获取vuex用户对象
        ...mapGetters({
            // 把 `this.vuexUser` 映射为 `this.$store.getters.user`
            vuexUser: 'user'
        })
    },
    created() {
        //本地获取用户数据
        var str= localStorage.getItem('userChoice')
        this.userChoice = JSON.parse(str)
        // console.log(this.userChoice) 

        //判断用户是否登录
        this.hasVuexUser()

        //获取地址信息
        this.getSite()
    },
    mounted() {
        // 这里主要处理地址（如果用户已经登录，就把用户的数据填充进去）
        if(this.vuexUser){
            // 判断用户是否登录 
            // 初始化地址
            var _this = this
            setTimeout(()=>{
                _this.getCity(_this.vuexUser.provice)
                _this.city=_this.vuexUser.city
            },500)
            setTimeout(()=>{
                _this.getArea(_this.vuexUser.city)
                _this.area=_this.vuexUser.area
                _this.user.shengCityArea = _this.vuexUser.provice+_this.vuexUser.city+_this.vuexUser.area
            },1000)
        }
    },
    methods: {
        //判断用户是否登录
        hasVuexUser() {
            if(this.vuexUser){
                this.provice = this.vuexUser.provice
                this.city = this.vuexUser.city
                this.area = this.vuexUser.area
                this.user.name = this.vuexUser.name
                this.user.tel = this.vuexUser.tel
                this.user.alipay = this.vuexUser.alipay
                this.user.address = this.vuexUser.address
                this.user.shengCityArea = this.vuexUser.provice+this.vuexUser.city+this.vuexUser.area
            }
        },
        //获取省市区信息
        async getSite() {
            var result = await this.$ajax('/site')
            if(result.status == 200) {
                this.site = result.data
            }
            // console.log(this.site)
        },
        //点击选择省市区，弹出三级联动
        showSiteFun() {
            this.showSite = !this.showSite
        },
        //获取城市列表
        getCity(value){
            this.site.forEach(item=>{
                if(item.name == value){
                    this.site_city = item.city
                    this.site_area = []
                }
            })
            this.city=""
            this.area=""
            //给地址赋值
            this.user.shengCityArea = ''
        },
        //获取区域列表
        getArea(value){
            this.site_city.forEach(item=>{
                if(item.name == value){
                    this.site_area = item.area
                }
            })
            this.area=""
            //给地址赋值
            this.user.shengCityArea = ''
        },
        //点击获取区
        getAdderss(value){
            //给地址赋值
            this.user.shengCityArea = `${this.provice}${this.city}${this.area}`
            //隐藏省市区三级联动
            this.showSite=false
        },
        //返回上一步重新估价
        goFront() {
            this.$router.go(-1)
        },
        //控制显示价格对比还是本机状况
        showProDesc() {
            this.chartOrFault = !this.chartOrFault
            if(this.chartOrFault){
                this.proDescTitle="本机状况"
            }else{
                this.proDescTitle="价格对比"
            }
        },
        //验证表单提交,点击提交按钮的时候用
        validateForm_btn() {
            //用户名不能为空
            if(Trim(this.user.name) == ''){
                toast('用户名不能为空!')
                return false
            }
            //手机号不能为空
            if(Trim(this.user.tel) == ''){
                toast('手机号不能为空!')
                return false
            }
            //手机号错误
            var reg_tel=/^1[3|4|5|7|8][0-9]{9}$/
			if(!reg_tel.test(Trim(this.user.tel))){
				toast('手机号格式不正确!')
				return false
			}
			//支付宝
			if(this.user.alipay == ''){
				toast('支付宝账号不能为空!')
				return false
			}
			//省市区不能为空
			if(this.user.shengCityArea == ''){
				toast('请选择所在的省市区!')
				return false
			}
            //详细地址
			if(Trim(this.user.address) == ''){
				toast('请输入您的详细地址!')
				return false
			}
            //同意服务协议
			if(!this.user.agree){
				toast('请您先阅读并同意服务协议!')
				return false
			}
            //完善订单信息
            this.pushToUserChoice()
        },
        //验证表单,关联按钮的点亮或者关闭
        validateForm() {
            this.$refs.btn.setBgcolor('#e3e6e9')
            //用户名不能为空
            if(Trim(this.user.name) == ''){
                return false
            }
            //手机号不能为空
            if(Trim(this.user.tel) == ''){
                return false
            }
            //手机号错误
            var reg_tel=/^1[3|4|5|7|8][0-9]{9}$/
			if(!reg_tel.test(Trim(this.user.tel))){
				return false
			}
			//支付宝账号不能为空
			if(this.user.alipay == ''){
				return false
			}
			//省市区份不能为空
			if(this.user.shengCityArea == ''){
				return false
			}
            //详细地址
			if(Trim(this.user.address) == ''){
				return false
			}
            //同意服务协议
			if(!this.user.agree){
				return false
			}
            //监听用户选择的手机信息，控制提交按钮的样式
            this.$refs.btn.setBgcolor('#fcdb00')
        },
        //完善订单信息
        pushToUserChoice() {
            //添加用户信息
            this.userChoice.user = this.user
            //添加回收方式
            this.userChoice.order_way = this.order_way
            //获取当前毫秒值
            var timestamp=new Date().getTime()
            //添加下单日期
            this.userChoice.order_createtime = timestamp
            //添加订单编号
            this.userChoice.order_code = 'hscode'+timestamp
            //添加订单状态:
            this.userChoice.order_state = 1
            
            // 获取本地存储的订单信息
            var hs_order= localStorage.getItem('hs_order')
            if(hs_order){
                //如果已经存在订单了
                hs_order = JSON.parse(hs_order)
            }else{
                //如果不存在订单
                hs_order=[]
            }
            //把当前订单保存进去，本地存储
            hs_order.unshift(this.userChoice)
            localStorage.setItem('hs_order',JSON.stringify(hs_order))
            console.log(this.userChoice)

            //页面跳转
            var order_code = this.userChoice.order_code
            this.$router.push({ path: '/hssuccess?order_code='+order_code})
        },
        //点击提交订单
        submitOrder(){
            //验证用户信息是否填写
            this.validateForm_btn()
        }
    },
    watch: {
        //监视用户数据填写，点亮按钮
        'user':{
            handler: function(curVal,oldVal){
                //验证表单提交
                this.validateForm()
            },
            deep: true
        }
    }
}
</script>

<style  lang="less" scoped>
@import "../../common/less/variable.less";
//滑动框架
.scroll-content{
    position:fixed;
    left:0;
    top:0px;
    bottom:0;
    width:100%;
    overflow:hidden;
    background:@color-gray-bg;
    z-index:20;
    .scroll-warpper{
        padding-bottom:10px;
        // 顶部价格
        .info-top{
            padding:20px;
            background:#fff;
            box-sizing:border-box;
            display:flex;
            margin-bottom:10px;
            .price-left{
                width:100%;
                overflow:hidden;
                flex:1;
                .price{
                    .num{
                        display:inline-block;
                        color:@color-alert-title;
                        font-size:50px;
                    }
                    .text{
                        display:inline-block;
                        color:@color-alert-title;
                        font-size:20px;
                    }
                }
                .note{
                    font-size:14px;
                    color:@color-alert-con;
                    margin-top:10px;
                    i{
                        vertical-align: middle;
                    }
                    .note-text{
                        display:inline-block;
                    }
                }
            }
            .price-right{
                flex:0 0 80px;
                text-align:right;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .btn{
                    text-align:center;
                    font-size:14px;
                    background:@color-yellow;
                    border:1px solid @color-yellow;
                    border-radius:15px;
                    height:28px;
                    line-height:28px;
                    &.btn-desc{
                        background:#fff;
                        color:@color-alert-con;
                        border:1px solid @color-alert-line;
                    }
                }
            }
        }
        // 图表或手机机况
        .info-center{
            width:100%;
            padding:0 10px;
            box-sizing:border-box;
            .center-box{
                width:100%;
                background:#fff;
                padding:10px 10px 0;
                box-sizing: border-box;
                border-radius:@border-alert-radius;
                .title{
                    font-size:14px;
                    height:14px;
                    line-height:16px;
                    vertical-align:middle;
                    margin:0 0 15px;
                    border-left:5px solid @color-blue;
                    text-indent:5px;
                }
                //本机状况
                .item-box{
                    overflow:hidden;
                    padding-bottom:10px;
                    .fault-item{
                        width:33.33%;
                        padding:0 3px 5px;
                        box-sizing:border-box;
                        display:table;
                        float:left;
                    }
                    .text{
                        font-size:10px;
                        color:@color-alert-con;
                        background:@color-gray-bg;
                        display:table-cell;
                        height:24px;
                        vertical-align:middle;
                        text-align:center;
                        padding:2px 5px 0;
                        line-height:11px;
                    }
                }
            }
        }
        //填写用户信息
        .info-user{
            width:100%;
            padding:0 10px;
            box-sizing:border-box;
            margin-top:10px;
            .user-box{
                width:100%;
                background:#fff;
                padding:10px 10px 0;
                box-sizing: border-box;
                border-radius:@border-alert-radius;
                .title{
                    font-size:14px;
                    height:14px;
                    line-height:16px;
                    vertical-align:middle;
                    margin:0 0 15px;
                    border-left:5px solid @color-blue;
                    text-indent:5px;
                }
                .item{
                    display:flex;
                    height:40px;
                    line-height:40px;
                    border-top:1px solid @color-alert-line;
                    &.noborder{border:none}
                    .text{
                        flex:0 0 70px;
                        font-size:14px;
                        color:@color-alert-con;
                        line-height: 40px;
                        i{
                            vertical-align:middle;
                            color:#ccc;
                            font-size:20px;
                            margin-right:5px;
                        }
                    }
                    &:nth-child(6){
                        .text{
                            i{
                                font-size:16px;
                            }
                        }
                    }
                    .form{
                        flex:1;
                        margin-left:10px;
                        font-size:14px;
                        color:@color-alert-title;
                        line-height:40px;
                        input{
                            font-size:14px;
                            height:40px;
                            line-height:40px;
                            width: 100%;
                        }
                    }
                    &.location{
                        height:105px;
                        line-height:35px;
                        .form{
                            margin-left:20px;
                            select{
                                border:none;
                                height:35px;
                                width:100%;
                                line-height:35px;
                                margin-right:10px;
                                color:@color-alert-con;
                                border-bottom:1px solid @color-alert-line;
                                box-sizing:border-box;
                                float:left;
                                &:nth-child(3){
                                    border:none;
                                }
                            }
                        }
                    }
                }
            }
        }
        //用户同意回收协议
        .agree{
            padding:10px 0 10px;
            text-align:center;
            .agree-wrapper{
                font-size:14px;
                color:@color-alert-title;
                input{
                    height:14px;
                    width:14px;
                    vertical-align:middle;
                    margin-right:5px;
                }
                .text{
                    font-size:12px;
                    display:inline-block;
                    line-height:30px;
                    color:@color-alert-con;
                }
                .book{
                    display:inline-block;
                    line-height:30px;
                    color:@color-red;
                }
            }
        }
        //按钮
        .btn-wrapper{}
    }
}
</style>
